<template>
	<view>
		<view class="head-nav">
			<view class="navBar" v-for="(item, index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==0">
			0
		</view>
		<view class="nav_item" v-if="isActive==1">
			1
		</view>
		<view class="nav_item" v-if="isActive==2">
			2
		</view>
		<view class="nav_item3" v-if="isActive==3">
			<view class="view1">
				<image :src="touxiang" style="width: 40rpx;height: 40rpx;"></image>
				<text class="name">{{name}}</text>
				<text class="status">状态异常</text>
			</view>
			<view class="view2">
				<text>{{juli}} | {{address}}</text>
				<image src="@/static/phone.png" style="margin-left: 196rpx;"></image>
				<image src="@/static/message.png" style="margin-right: 20rpx;margin-left: auto;"></image>
			</view>
			<view style="border-bottom: 2rpx solid #E5E5E5;margin: 20rpx 0rpx 30rpx 0rpx;"></view>
			<view class="view3">
				<image src="@/static/meat.png" style="width: 80rpx;height: 80rpx;"></image>
				<view class="product-info">
					<view style="font-size: 24rpx;color: #1A1A1A;">带皮五花肉（300g）</view>
					<view style="font-size: 20rpx;color: #666666;">规格:规格一</view>
					<view style="font-size: 20rpx;color: #1A1A1A;">￥14.80 x1</view>
				</view>
				<view style="font-size: 20rpx;color: #1A1A1A;margin-right: 20rpx;margin-left: auto;margin-top: 60rpx;">
					<text>共3件 展开</text>
				</view>
			</view>
		    <view style="border-bottom: 2rpx solid #E5E5E5;margin: 20rpx 0rpx 30rpx 0rpx;"></view>
			<view style="margin-left: 20rpx;font-size: 26rpx;font-family: Alibaba PuHuiTi;font-weight: 400;color: #1A1A1A;margin-bottom: 20rpx;">
				<text>本单预计收入</text>
				<text style="margin-left: 409rpx;">￥44.40</text>
			</view>
			<view style="margin-left: 20rpx;font-size: 26rpx;font-family: Alibaba PuHuiTi;font-weight: 400;color: #1A1A1A;margin-bottom: 20rpx;">
				<text>本单预计收入</text>
				<text style="margin-left: 409rpx;">￥44.40</text>
			</view>
		    <view style="border-bottom: 2rpx solid #E5E5E5;margin: 0rpx 0rpx 17rpx 0rpx;"></view>
		    <view class="dirver">
				<view class="item">
					<text>骑手：张三  15978945612</text>
					<image src="@/static/phone.png" style="width: 30rpx;height: 30rpx;margin-left: 224rpx;"></image>
					<image src="@/static/message.png" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;margin-left: auto;"></image>
				</view>
				<view class="item">
					<text>送达时间：12:30 送达</text>
					<text style="margin-right: 20rpx;margin-left: auto;">异常返回中</text>
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==4">
			4
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isActive: 3,
			navList:[
			{
				index:0,
				title:'新订单'
			},
			{
				inedex:1,
				title:'退单',
			},
			{
				index:2,
				title:'超时未发货'
			},
			{
				index:3,
				title:'骑手异常'
			},
			{
				inedex:4,
				title:'库存不足'
			}
			],
			touxiang:require('@/static/logo.png'),
		    name:'张三三',
			juli:'1.3km',
			address:'成都市青羊区天府三街205号'
		}
	},
	onShow() {
		this.goTo()
	},
	onLoad(){
		
	},
	methods:{
		checked(index){
			this.isActive = index
		},
		goTo() {
			var that = this;
			uni.getStorage({
				key: 'i',
				success: function(res) {
					var i = JSON.parse(res.data);
					that.isActive = i;
					uni.removeStorage({
						key: 'i',
						success: function(res) {
							// console.log('success');
						}
					});
					// console.log(that.tabIndex);
				}
			});
		},
	}
}
</script>
<style lang="scss">
	page {
		background: rgb(245, 245, 245);
	}
	.head-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		background: #FFFFFF;
	}
	.head-nav .navBar {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
	}
	.active {
		position: relative;
	}
	.active::after {
		content: '';
		position: absolute;
		background: #FEB140;
		width: 60rpx;
		height: 4rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
    .nav_item3 {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
		display: flex;
		flex-direction: column;
		.view1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
			margin-left: 20rpx;
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #1A1A1A;
			.name {
				margin-left: 20rpx;
			}
			.status {
				margin-left: auto;
				margin-right: 20rpx;
			}
		}
		.view2 {
			display: flex;
			flex-direction: row;
			margin-top: 30rpx;
			margin-left: 20rpx;
			text {
				font-size: 20rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #666666;
			}
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	    .view3 {
			display: flex;
			flex-direction: row;
			margin-left: 20rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			.product-info {
				margin-left: 20rpx;
				line-height: 35rpx;
			}
		}
		.item {
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #1A1A1A;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
